<template>
  <div class="My">
    <div class="user-box">
      <div class="user">
        <div class="user-img">
          <img :src="userdata.avatar_medium" alt="" />
        </div>
        <div class="user-name">
          用户名字：{{ userdata.user_name }}
          <div class="user-id">用户id：{{ userdata.user_id }}</div>
          <div class="user-age">用户豆龄：{{ userdata.age }}</div>
        </div>
      </div>
    </div>

 <div class="attention-box">
      <div class="text">关注的用户：</div>
      <div class="attention-user" v-for="(item , index) in initShowProData" :key="index" @click="goUserDetail(item.u.id)">
        <div class="attentionuser-data">
          <div class="attentionuser-img">
            <img :src="item.u.p" alt="">
          </div>
          <div class="attentionuser-meg">
            <div class="attentionuser-name">姓名：<span class="attentionuserdata-text">{{item.u.n}}</span></div>
            <div class="attentionuser-lv">Lv：<span class="attentionuserdata-text">{{item.u.lv}}</span></div>
            <div class="attentionuser-lv">粉丝：<span class="attentionuserdata-text">{{item.u.followers_count_text}}</span></div>
            <div class="attentionuser-lv">总菜谱：<span class="attentionuserdata-text">{{item.u.recipes_count_text}}</span></div>
            <!-- <div class="attentionuser-lv">总浏览量：<span class="attentionuserdata-text">{{item.u.views_count_text}}</span></div> -->
          </div>
          <div><van-button type="warning">取消关注</van-button></div>
        </div>
      </div>
      <div v-if="isShowMore">
        <div  class="more" @click="showmore">查看更多</div> 
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  created() {
    this.getuserdata();
    this.getattactiondata()
  },
  data() {
    return {
       //初始显示的1条评论数据
      initCount: 3,
      initShowProData: [],

      //是否显示更多评论数据
      isShowMore: true,
      myattacition:[],
      userdata: [],
      attactiondata:[],

     
    };
  },
  methods: {
    getdata() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/home/videos/0/20",
      })
        .then((res) => {
          // console.log(res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },

    getuserdata() {
      this.axios({
        method: "get",
        url: "/user/info/16753515",
      })
        .then((res) => {
          this.userdata = res.data.result.user;
          console.log("res==>", res);
          // console.log("this.userdata==>", this.userdata);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    getattactiondata(){
       this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/home/ffeeds/0/20",
      })
        .then((res) => {
          this.attactiondata = res.data.result.rfs;
          // console.log("res==>", res);
          // console.log("this.myattacition==>", this.myattacition);
           this.initShowProData.push(...this.attactiondata.slice(0, this.initCount));

          if (this.attactiondata.length <= 1) {
            this.isShowMore = false;
          }
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
     showmore() {
      this.initShowProData.push(...this.attactiondata.slice(this.initCount));
      this.isShowMore = false;
    },
    goUserDetail(id){
      this.$router.push({name:'Userdetail', params:{id}})
    }
  },
};
</script>

<style lang="less" scoped>
.my {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.set {
  width: 33px;
  height: 33px;
  background: url("../assets/set.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  right: 10px;
  top: 20px;
}
.user-dsc {
  color: #888;
}
.rule-list {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: 10px 0;
}
.rule-list-title {
  font-size: 15px;
  color: #555;
}
.rule-list-gt {
  position: absolute;
  right: 0;
  font-size: 16px;
  color: #888;
}
.user-box {
  display: flex;
  flex-wrap: wrap;
  background-color: #ddd;
}
.user {
  width: 100%;
  height: 100px;
  margin: 30px 0 10px 10px;
  display: flex;  
}
.user-box{
  background: url('../assets/bg.jpg');
  opacity: .9;
}
.user-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.user-name {
  margin: 20px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(11, 185, 63, 0.9);
}
.user-id {
  font-size: 12px;
  color: rgba(218, 129, 13, 0.9);
  margin: 5px 0;
}
  .text {
    font-size: 16px;
    padding: 15px 0 0 0;
  }
  .attention-user{
  width: 100%;
  margin: 13px 10px;
  }
  .attentionuser-data{
   display: flex;
   justify-content: space-around;
  }
  .attentionuser-data{
    font-size: 15px;
    margin: 0 10px;
  }
  .attentionuserdata-text{
    font-size: 13px;
    color: rgb(62, 72, 209);
  }
  .attentionuser-meg{
    font-size: 15px;
    margin: 0 13px;
  }
</style>